<%--
  Created by IntelliJ IDEA.
  User: FENG1
  Date: 2022-05-31
  Time: 16:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>商品销售统计图</title>
    <link rel="stylesheet" href="/static/component/pear/css/pear.css" />
    <style>
        #lirun{
            width: 200px;
            margin: -28px 0 0 900px;
            position: relative;
            right: 0px;
            font-size: 17px;
        }
        #main{
            width: 700px;
            height: 700px;
            margin: 0px 0 0 50px;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            position: relative;
            background-color: #fff;
            border-radius: 10px;
            border: 3px solid #eee;
            padding: 30px;
            transform: scale(0.9);
            float: left;
            cursor: pointer ;
        }
    </style>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">时间</label>
                <div class="layui-input-inline">
                    <select name="year" id="year">
                        <c:forEach items="${Year}" var="y">
                            <option value="${y.name}">${y.name}</option>
                        </c:forEach>
                    </select>
                </div>
                <button id="cha" class="pear-btn pear-btn-md pear-btn-primary" >
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
                <button type="reset" class="pear-btn pear-btn-md">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
                <div id="lirun" style="position: relative;right: 0px"></div>
            </div>
        </div>
    </div>
</div>
<div class="layui-card">
    <div id="main"></div>
</div>

<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
<script src="/static/js/echarts.js"></script>
<script  type="text/javascript">
    layui.use(['table', 'echarts', 'jquery','element'], function() {
        var element = layui.element,
            $ = layui.jquery,
            echarts = layui.echarts,
            table = layui.table;
        var year =  $("[name='year']").val();
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
        $.post('/sum/sumPrice',{year:year},function (res) {
            let array = [];
            array.push(0,0,0,0,0,0,0,0,0,0,0,0);
            for(var i =0;i<res.length;i++){
                array[res[i].orderYear-1]=(res[i].value);
            }
            option = {
                title: {
                    text: '销售金额盘点',
                    left: 'center'
                },
                color: ['#0e72cc', '#6ca30f', '#f59311', '#fa4343', '#16afcc',
                    '#85c021', '#d12a6a', '#0e72cc', '#6ca30f', '#f59311',
                    '#fa4343', '#16afcc'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '金额',
                        type: 'bar',
                        barWidth: '60%',
                        data:array
                    }
                ]
            };
            option && myChart.setOption(option);
        })
        $("#cha").click(function(data) {
            var array1= [];
            array1.push(0,0,0,0,0,0,0,0,0,0,0,0);
            year =  $("[name='year']").val();
            $.post('/sum/sumPrice',{year:year},function (res) {
                for(var i =0;i<res.length;i++){
                    array1[res[i].orderYear-1]=(res[i].value);
                }
                option = {
                    title: {
                        text: '销售金额盘点',
                        left: 'center'
                    },
                    color: ['#0e72cc', '#6ca30f', '#f59311', '#fa4343', '#16afcc',
                        '#85c021', '#d12a6a', '#0e72cc', '#6ca30f', '#f59311',
                        '#fa4343', '#16afcc'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '金额',
                            type: 'bar',
                            barWidth: '80%',
                            data:array1
                        }
                    ]
                };
                option && myChart.setOption(option);
            })
        })
    })
</script>
</body>
</html>